<template>
<div class="RoleManagement">
    <div class="title">权限管理-角色管理</div>
    <div class="contentBox">
        <div class="lcontent">

            <div class="licon">
                <div class="icon_jia" @click="doSet"></div>
                <div class="icon_shan" @click.prevent="doDelete"></div>
            </div>
            <div class="ltable">
                <el-table
                        :header-cell-style="{background:'rgba(247,249,252,.5)',color:'#1F2E4D',}"
                        @selection-change="handleSelectionChange"
                           :data="tableData"
                           style="width: 100%" ref="multipleTable">
                    <el-table-column
                            prop="key"
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="key"
                            label="编号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="value"
                            label="角色名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="address"
                            label="操作">
                        <template slot-scope="scope">
                            <div class="btn"  @click="handleClick(scope.row)">{{msg}}</div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

        </div>
    </div>
</div>
</template>

<script>
    export default {
        name: "RoleManagement",
        data() {
            return {
                tableData: [{
                    key: '',
                    value: '',
                }],
                isPopup: false,
                input: '',
                options: [{
                    value: '',
                    label: ''
                }],
                value: '',
                isinp: true,
                msg:'编辑',
                selectlist:[],
                select:'',
            }
        },
        methods: {
            doSet(){
                this.$router.push('/CharacterSet')
            },
            //查询所有角色
            getRoles(){
                this.lAxios({
                    method: "post", //方法
                    url: "/power/roleList.do", //路径，基础路径在main.js里面配置
                    params: {
                        //传参
                    }
                }).then(res =>{
                    // console.log(res)
                    //成功
                    if(res.data.status == 0){
                        this.tableData = res.data.data
                    }else{

                    }
                    //异常
                }).catch(err =>{
                    //失败的回调函数
                    console.log(err);
                });
            },
            handleSelectionChange() {
            },
            doDelete(){
                var ids =[];
                this.$refs.multipleTable.selection.forEach(function(i) {
                    ids.push(i.key);
                })
                // console.log(ids);
                if(ids){
                    this.lAxios({
                        method: "post", //方法
                        url: "/power/deleteRole.do", //路径，基础路径在main.js里面配置
                        params: {
                            //传参
                            ids:ids+""
                        }}).then(res =>{
                        //成功
                        if(res.data.status == 0){
                            this.$message.success("删除成功");
                            this.getRoles();
                        }else if(res.data.status == 1){
                            this.$message.error("不能删除基础角色");
                        }
                        //异常
                    }).catch(err =>{
                        //失败的回调函数
                        console.log(err);
                    });
                }else{
                    console.log("请选择")
                }
            },
        //    点击确定后
            handleClick(row){
                // this.msg = '修改'
                if (this.msg == '编辑'){
                    this.$router.push({
                        name:'CharacterSet',
                        query:{
                            key:row.key,
                            value:row.value
                        }
                    })

                }
            }
        },
        activated(){
            this.getRoles();
        }
    }
</script>

<style lang="scss" scoped>
    .RoleManagement{
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        background-color: #F7F9FC;
        font-size: 12px;
        padding-left: 20px;
    }
    .title{
        height: 43px;
        line-height: 43px;
    }
    .top {
        height: 25px;
        border-bottom: 1px solid #797979;
    }

    .contentBox{
        background-color: white;
    }
    .lcontent {
        width: 96%;
        margin-left:2%;
        /*height: 171px;*/
        padding-top:20px;
    }

    .licon {
        margin-top: 10px;
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;
    }

    .licon > div {
        margin-right: 10px;
    }

    .icon_jia{
        width: 32px;
        height: 32px;
        margin-right: 10px;
        background: url("../../assets/imgs/communication/jia.png") no-repeat;
    }
    .icon_shan{
        width: 32px;
        height: 32px;
        margin-left: 10px;
        background: url("../../assets/imgs/communication/shan.png") no-repeat;
    }

    .ltable {
        width: 100%;
        border-top: 1px solid #f7f7f7;
        padding-bottom: 30px;
        margin-top: 20px;
    }

    /*-------------弹窗------------------*/
    .Popup {
        width: 100%;
        height: 100%;
        z-index: 99;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .5);
    }

    .Popup_Box {
        width: 261px;
        height: 210px;
        background-color: white;
        box-shadow: 5px 5px 6px 2px #717171;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .PopupTop {
        background-color: #f5f5f5;
        line-height: 28px;
        font-size: 12px;
        height: 28px;
        position: relative;
    }

    .PopupTop > span:nth-child(1) {
        margin-left: 10px;

    }

    .PopupTop > span:nth-child(2) {
        position: absolute;
        top: 8px;
        right: 10px;
    }

    .PopupCont {
        font-size: 12px;

    }

    .PopupCont > div {
        margin-top: 5px;
        margin-left: 34px;
    }

    .PopupCont > div:nth-child(4) {
        margin-left: 10px;
    }

    .PopupCont > div > span {
        margin-right: 10px;
    }

    .linp {
        width: 177px;
    }

    .lselect {
        width: 110px;
    }

    .PopupCont > button {
        width: 32px;
        height: 20px;
        background-color: #5db75d;
        color: white;
        font-size: 12px;
        border: 1px solid #5db75d;
        border-radius: 4px;
        position: absolute;
        bottom: 10px;
        right: 15px;
    }
    .icon{
        color: #199ed8;
    }
    .btn{
        width: 140px;
        height: 40px;
        line-height: 40px;
        color: #3377ff;
        border: 1px solid #3377ff;
        border-radius: 4px;
        margin-left:41%;
        cursor: default;
        /*text-align: center;*/
    }
    .lselect{
        width:237px;
    }
</style>
